<template>
	<view class="mainpadding beijingse">
		<view class="ffffff mainpadding radius shangbj">
			<view class="flexbetween">
				<view class="flexleft">
					<view class="shilitu margin_right2">
						<image :src="dpdetail.logo_text" mode=""></image>
					</view>
					<view class="">
						<view class="ershib">{{dpdetail.name}}</view>
						<view class="margin_top1 huisetext">粉丝 {{dpdetail.like}}</view>
					</view>
				</view>
				<view class="huangbtn" @click="guanzhu" v-if="!dpdetail.is_gz">关注</view>
				<view class="huangbtn" @click="guanzhu" v-if="dpdetail.is_gz">取消关注</view>
			</view>
		</view>
		<!-- 商品 -->
		<view class="shangpinbox">
			<view class="flexbetween margin_top">
				<view :class="current==0?'nofocustext':'focustext'" @click="selectab(0)">综合</view>
				<view class="flexleft">
					<view :class="current==1?'nofocustext ':'focustext'" @click="selectab(1)">销量</view>
					<view class="trbox">
						<view :class="type==1?'shanghjt':'shanghuijt'" @click.stop="changetype(1)"></view>
						<view  :class="type==2?'xiahjt':'xiahuijt'" @click.stop="changetype(2)"></view>
					</view>
				</view>
				<view class="flexleft">
					<view :class="current==2?'nofocustext':'focustext'" @click="selectab(2)">价格</view>
					<view class="trbox">
						<view :class="type==3?'shanghjt':'shanghuijt'" @click.stop="changetype(3)"></view>
						<view  :class="type==4?'xiahjt':'xiahuijt'" @click.stop="changetype(4)"></view>
					</view>
				</view>
				<view :class="henghshu==1?'hengzhe':'shuzhe'" @click="xuanze()"></view>
			</view>
			<!-- 横着 -->
			<view class="" v-if="henghshu==1">
				<view class="flexbetween flex_wrap">
					<view class="shangpbox margin_top" v-for="item in list.data" :key="item.id" @click="tzspxq(item.id)">
						<view class="shangptp">
							<image :src="item.image_text" mode=""></image>
						</view>
						<view class="mainpadding ffffff baibox">
							<view class="ershil yhxiank">{{item.title}}</view>
							<view class="flexbetween margin_top5">
								<view class="jiagetext">￥{{item.goodsprice.price}}</view>
								<view class="goueucheicon"></view>
							</view>
							<!--  -->
							<!-- <view class="jiagetext">65.00福利券+633.66现金</view> -->
						</view>
					</view>
				</view>
			</view>
			<!-- 竖着 -->
			<view class="" v-if="henghshu==2">
				<view class="flextops margin_top ffffff radius mainpadding dingwei" v-for="item in list.data" :key="item.id" @click="tzspxq(item.id)">
					<view class="shuzslu">
						<image :src="item.image_text" mode=""></image>
					</view>
					<view class="" style="width: 62%;">
						<view class="ershil xiankuan">{{item.title}}</view>
						<view class="flexbetween shujrgwc">
							<view class="jiagetext">￥{{item.goodsprice.price}}</view>
							<view class="goueucheicon"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				current: 0,
				henghshu: 1,
				dpdetail:{
					name:"",
					logo_text:"",
					like:"",
					is_gz:false
				},
				page: 1,
				limit: 12,
				list: {
					data: []
				},
				listid:"",
				// 1销量由高到底，2销量由低到高，3价格由高到底，4价格由低到高
				type:0,
			}
		},
		onLoad(options) {
			this.listid=options.id
		},
		onShow() {
			this.getdetail()
			this.init()
		},
		methods: {
			// 跳转商品详情
			tzspxq(id) {
				let obj = {
					goods_id: id
				}
				uni.navigateTo({
					url: '/pages/homepage/shangpinxq?msg=' + encodeURIComponent(JSON.stringify(obj))
				})
			},
			getdetail(){
				httpRequest.request('/api/shop/shopDetail', 'POST', {
					shop_id: this.listid
				}, false, false, true).then(res => {
					this.dpdetail = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			guanzhu(){
				if (!httpRequest.checkIsLogin()) {
					httpRequest.doLogin();
					return false;
				}
				httpRequest.request('/api/shop/gzShop', 'POST', {
					shop_id: this.listid
				}, false, false, true).then(res => {
					httpRequest.toast(res.msg);
					this.getdetail()
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/api/shop/goodsList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					hot_status:this.type==1?1:this.type==2?2:'',
					zh_status:this.current==0?1:"",
					price_status:this.type==3?1:this.type==4?2:'',
					shop_id:this.listid
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			xuanze() {
				this.henghshu = this.henghshu == 1 ? 2 : 1
			},
			// 切换筛选项
			selectab(i) {
				if (i == this.current) {
					return false
				}
				if(i==1){
					this.type=1
				}
				if(i==2){
					this.type=3
				}
				this.current = i
				this.init()
			},
			// 切换状态值
			changetype(i){
				this.type=i
				if(i==1 || i==2){
					this.current = 1
				}
				if(i==3 || i==4){
					this.current = 2
				}
				this.init()
			},
		}
	}
</script>
<style lang="scss" scoped>
	.huangbtn {
		width: 146rpx;
		height: 55rpx;
		font-size: 26rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FAB536;
		border-radius: 39rpx;
		border: 2rpx solid #FAB536;
	}
	
	.huisetext {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}
	
	.ershib {
		font-size: 28rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}
	
	.shilitu {
		width: 86rpx;
		height: 86rpx;
		border-radius: 50%;
	
		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
	
	.shangbj {
		margin-top: 30rpx;
	}
	
	.shangbj:first-child {
		margin-top: 0rpx;
	}
	// 竖着
	.shujrgwc {
		position: absolute;
		bottom: 30rpx;
		width: 57%;
		right: 30rpx;
	}

	.shuzslu {
		width: 206rpx;
		height: 206rpx;
		border-radius: 11rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx;
		}
	}

	//结束
	// 商品列表样式
	.shangpbox {
		width: 48%;
	}

	.jiagetext {
		font-size: 24rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #FAB536;
	}

	.baibox {
		border-radius: 0 0 11rpx 11rpx;
	}

	.yhxiank {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.shangptp {
		width: 338rpx;
		border-radius: 11rpx 11rpx 0 0;
		height: 338rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 11rpx 11rpx 0 0;
		}
	}
</style>
<style lang="scss" scoped>
	.shuzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/shu.png');
	}

	.hengzhe {
		width: 33rpx;
		height: 33rpx;
		background-size: 100% 100%;
		background-image: url('../../static/image/system/heng.png');
	}

	.trbox {
		margin-left: 10rpx;
	}

	.xiahuijt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuijt.png');
		background-size: 100% 100%;
	}

	.shanghuijt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuijt.png');
		background-size: 100% 100%;
	}

	.shanghjt {
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/shanghuangjt.png');
		background-size: 100% 100%;
	}

	.xiahjt {
		margin-top: 6rpx;
		width: 13rpx;
		height: 10rpx;
		background-image: url('../../static/image/system/xiahuangjt.png');
		background-size: 100% 100%;
	}

	.focustext {
		font-size: 26rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.nofocustext {
		font-size: 30rpx;
		font-family: PingFang SC-Heavy, PingFang SC;
		font-weight: 800;
		color: #000000;
	}

	.sousuobox {
		width: 100%;
		background: #F3F3F3;
		padding: 20rpx 40rpx;
		border-radius: 60rpx;
		box-sizing: border-box;
	}
</style>
